<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-upload-grid"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-upload-grid__item-container"
			v-for="(_item, _index) in _list"
			:key="_index"
		>
			<pure-block :ratio="ratio">
				<view class="pure-upload-grid__item--file">
					<!-- 封面图 -->
					<image
						class="pure-upload-grid__item__cover"
						:src="_item?.[coverKey]"
						:mode="coverMode"
					/>

					<!-- 等待上传 -->
					<view
						class="pure-upload-grid__item__status pure-upload-grid__item__status--waiting"
						v-if="_item?.status === 'waiting'"
					>
						<slot name="waiting">
							<!-- 预览按钮 -->
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--preview"
									@tap.stop="_handlePreview(_index, _item)"
									:hover-class="hoverClass"
								>
									<pure-icon
										:name="previewIconName"
										:mode="previewIconMode"
										v-bind="previewIconOpts"
									></pure-icon>
								</view>
							</view>

							<!-- 删除按钮 -->
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--delete"
									@tap.stop="_handleDelete(_index, _item)"
								>
									<pure-icon
										:name="deleteIconName"
										:mode="deleteIconMode"
										v-bind="deleteIconOpts"
									></pure-icon>
								</view>
							</view>
						</slot>
					</view>

					<!-- 上传中 -->
					<view
						class="pure-upload-grid__item__status pure-upload-grid__item__status--uploading"
						v-else-if="_item?.status === 'uploading'"
					>
						<slot name="uploading">
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--uploading"
									v-if="uploadingIconName"
								>
									<pure-icon
										:name="uploadingIconName"
										:mode="uploadingIconMode"
										v-bind="uploadingIconOpts"
									></pure-icon>
								</view>
								<view
									class="pure-upload-grid__item__status__text"
									v-if="uploadingText"
								>
									{{ uploadingText }}
								</view>
								<!-- 进度条 -->
								<view
									class="pure-upload-grid__item__status__progress"
									v-if="showProgress"
								>
									<view
										class="pure-upload-grid__item__status__progress__text"
										v-if="showProgressText"
									>
										{{ _item?.progress?.toFixed(2) || 0 }}%
									</view>
									<view class="pure-upload-grid__item__status__progress__progress">
										<pure-progress
											:percent="_item?.progress || 0"
											:size="progressSize"
											:showPivot="false"
											v-bind="progressOpts"
										></pure-progress>
									</view>
								</view>
							</view>
						</slot>
					</view>

					<!-- 上传失败 -->
					<view
						class="pure-upload-grid__item__status pure-upload-grid__item__status--fail"
						v-else-if="_item?.status === 'fail'"
					>
						<slot name="fail">
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--fail"
									v-if="failIconName"
								>
									<pure-icon
										:name="failIconName"
										:mode="failIconMode"
										v-bind="failIconOpts"
									></pure-icon>
								</view>
								<view
									class="pure-upload-grid__item__status__text"
									v-if="failText"
								>
									{{ failText }}
								</view>
							</view>

							<!-- 删除按钮 -->
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--delete"
									@tap.stop="_handleDelete(_index, _item)"
									:hover-class="hoverClass"
								>
									<pure-icon
										:name="deleteIconName"
										:mode="deleteIconMode"
										v-bind="deleteIconOpts"
									></pure-icon>
								</view>
							</view>
						</slot>
					</view>

					<!-- 上传成功 -->
					<view
						class="pure-upload-grid__item__status pure-upload-grid__item__status--success"
						v-else-if="_item?.status === 'success'"
					>
						<slot name="success">
							<!-- 预览按钮 -->
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--preview"
									@tap.stop="_handlePreview(_index, _item)"
									:hover-class="hoverClass"
								>
									<pure-icon
										:name="previewIconName"
										:mode="previewIconMode"
										v-bind="previewIconOpts"
									></pure-icon>
								</view>
							</view>

							<!-- 删除按钮 -->
							<view class="pure-upload-grid__item__status__content">
								<view
									class="pure-upload-grid__item__status__icon pure-upload-grid__item__status__icon--delete"
									@tap.stop="_handleDelete(_index, _item)"
									:hover-class="hoverClass"
								>
									<pure-icon
										:name="deleteIconName"
										:mode="deleteIconMode"
										v-bind="deleteIconOpts"
									></pure-icon>
								</view>
							</view>
						</slot>
					</view>
				</view>
			</pure-block>
		</view>

		<!-- 上传按钮 -->
		<view
			class="pure-upload-grid__item-container"
			v-if="list?.length < maxCount"
			:hover-class="hoverClass"
			@tap="_handleChoose"
		>
			<pure-block :ratio="ratio">
				<view class="pure-upload-grid__item--button">
					<view class="pure-upload-grid__item--button__icon">
						<pure-icon
							:name="btnIconName"
							:mode="btnIconMode"
							v-if="btnIconName"
						></pure-icon>
					</view>
					<view
						class="pure-upload-grid__item--button__text"
						v-if="btnText"
					>
						{{ btnText }}
					</view>
				</view>
			</pure-block>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onChoose", "onDelete"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 列数
		if (_props.columns) array.push(`--pure-upload-grid-columns: ${_props.cols}`);

		// 间隔
		if (_props.gap) array.push(`--pure-upload-grid-gap: ${_props.gap}`);

		return array;
	});

	// 真正显示的列表
	const _list = computed(() => {
		// 显示 maxCount 个
		return _props.list.slice(0, _props.maxCount);
	});

	// 选择
	function _handleChoose() {
		_emits("onChoose", _props.maxCount - _list.value.length);
	}

	// 删除
	function _handleDelete(index, item) {
		_emits("onDelete", index, item);
	}

	// 预览
	function _handlePreview(index, item) {
		uni.previewImage({
			urls: _list.value.map((item) => item?.[_props?.coverKey]),
			current: item?.[_props?.coverKey]
		});
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
